import Vue from "vue";
import store from '../store'

// 自定义指令
const directives = {
	'animate': {
		// bind 钩子函数，在指令第一次绑定到元素时调用
		// 可以执行一次性的初始化操作

		// inserted 钩子函数，在绑定元素插入父节点时调用

		// update 钩子函数，在绑定元素所在的模板更新时调用
		// 可以通过比较更新前后的绑定值进行一些操作

		// componentUpdated 钩子函数，在绑定元素所在模板完成一次更新周期时调用

		// unbind 钩子函数，在指令与元素解绑时调用
		bind: function(el, binding, vnode) {
			const getOffsetTop = obj => {
				let tmp = obj.offsetTop;
				let val = obj.offsetParent;
				while (val != null) {
					tmp += val.offsetTop;
					val = val.offsetParent;
				}				
				return tmp;
			};
			binding.addClass = () => {
				Vue.prototype.$nextTick(() => {
					// 获取一个元素的大小以及其相对于视口的位置 返回一个 DOMRect 对象，包含了一系列属性，如 left、top、right、bottom、x、y、width 和 height
					const { height } = el.getBoundingClientRect(); // 元素高度
					if (!binding.top) {
						binding.top = getOffsetTop(el);
					}
					const top = binding.top;
					const h = window.innerHeight;
					// window.scrollY 返回文档在垂直方向上已经滚动的像素值 对于实现页面滚动效果，如无限滚动或滚动监听，非常有用
					let hhh = store.state.groupTopHeight <= 0 ? 0 : store.state.groupTopHeight;
					if (top + hhh > window.scrollY && top + height < window.scrollY + h) {
						if (el.className.indexOf(binding.value.active) == -1) {
							// console.log('sss-', store.state.groupTopHeight, binding.value.active, el.className);
							el.className = binding.value.active + " " + el.className;
						}
					} else {
						if (el.className.indexOf(binding.value.active) > -1) {
							let className = el.className.split(" ");
							className.splice(className.indexOf(binding.value.active), 1);
							el.className = className.join(" ");
						}
					}
				});
			};
			window.addEventListener("scroll", binding.addClass, true);
			binding.addClass();
		},
		unbind: function(el, binding, vnode) {
			if (binding.addClass) {
				window.removeEventListener("scroll", binding.addClass, true);
			}
		},
		update(el, binding, vnode) {
			// 指令所在元素更新时调用，可以处理新值和旧值的变化
			// el.style.color = binding.value;
		}
	}
};

export default {
	install(Vue) {
		Object.keys(directives).forEach((key) => {
			Vue.directive(key, directives[key])
		})
	}
}